<template>
  <div class="container">
    <div class="container-in">
      <div style="height: 15px;"></div>
      <div style="width: 90%;margin-left: 5%;background: #ffffff;border-radius: 10px;">
        <div style="height: 20px;"></div>
        <div @click="addMake"
          style="color: #000000;width: 90%;margin-left: 5%;display: flex;align-items: center;justify-content: space-between;">
          <div>新增预约任务</div>
          <div class="addBtn">新增</div>
        </div>
        <div style="height: 20px;"></div>
      </div>
      <div style="height: 10px"></div>
      <div v-show="list.length == 0">
        <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
        </u-empty>
      </div>
      <div style="height: 10px;"></div>
      <!-- <div v-for="item in list">
          <div style="height: 30rpx;"></div>
          <div class="flex">
            <div>
              <text>{{ item.appointTime }}</text>
              <text>{{ item.appointTimeRange }}</text>
            </div>
            <div class="looks" @click="cancel(item)">取消预约</div>
            <div class="look" @click="detail(item)">预约明细</div>
          </div>
          <div style="height: 30rpx;"></div>
          <u-line color="#ffffff"></u-line>
        </div> -->
      
      <div class="card" v-for="item in list" style="margin-top: 10px;">
        <div style="height: 10px"></div>
        <div class="card-top">
          <div style=" text-align: center;font-size: 18px;font-weight: 500;">{{ item.id }}</div>
          <div class="topStatus">
            <div>
              {{ item.appointDetailState === 0 ? "未开始" : item.appointDetailState == 1 ? "进行中" : "已完成" }}
            </div>
          </div>
        </div>
        <div style="height: 10px"></div>
        <u-line color="#83AF92"></u-line>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>预约日期</div>
          <div>{{ item.appointTimeRange }}</div>
        </div>
        <div style="height: 15px"></div>
        <div class="newFlex">
          <div>有机质类型</div>
          <div>{{ item.organicType }}</div>
        </div>
        <div style="height: 15px"></div>
        <div class="newFlex">
          <div>预估重量（吨）</div>
          <div>{{ item.appointWeight }}</div>
        </div>
        <div style="height: 15px"></div>
        <div class="newFlex">
          <div>车辆类型</div>
          <div>{{ item.vehicleType == 0 ? "收运车" : "自派车" }}</div>
        </div>
        <div style="height: 15px"></div>
        <div class="newFlex">
          <div>车牌号</div>
          <div>{{ item.licenseNumber }}</div>
        </div>
        <div style="height: 15px"></div>
        <div class="flex2" v-if="item.appointDetailState === 0" @click="cancel(item)">取消预约</div>
        <div style="height: 15px"></div>
      </div>
      <!-- <div class="card" v-for="item in list" style="margin-top: 10px;">
        <div style="height: 10px;"></div>
        <div style="width: 90%;margin-left: 5%;">
          <div>{{ item.appointTimeRange }}</div>
          <div style="height: 10px;"></div>
          <div class="titles">{{ item.organicType }}</div>
          <div style="height: 10px;"></div>
          <div style="display: flex;align-items: center;">
            <div>预估重量(吨)：{{ item.appointWeight }}</div>
            <div style="width: 5%;"></div>
            <div>车辆类型：{{ item.vehicleType == 0 ? "收运车" : "自派车" }}</div>
            <div v-if="item.vehicleType === 0">车辆类型：收运车</div>
            <div v-if="item.vehicleType === 1">自派车:{{ item.licenseNumber }}</div>
          </div>
        </div>
        <u-line color="#fff" :dashed="true"></u-line>
        <div style="height: 20px;"></div>
        <div style="display: flex;align-items: center;justify-content: space-between;width: 90%;margin-left: 5%;">
          <div class="flex1">{{ item.appointDetailState === 0 ? "未开始" : item.appointDetailState == 1 ? "进行中" : "已完成" }}
          </div>
          <div class="flex2" v-if="item.appointDetailState === 0" @click="cancel(item)">取消预约</div>
        </div>
        <div style="height: 20px;"></div>
      </div> -->
      <!-- <div class="btn" @click="addMake">新增预约</div> -->
      <!-- popup -->
      <u-overlay :show="show">
        <view class="warp">
          <view class="rect" @tap.stop>
            <div class="con">
              <div class="title">{{ detailTime }}</div>
              <div style="height: 25rpx;"></div>
              <u-line color="#ffffff"></u-line>
              <div style="height: 30rpx;"></div>
              <div v-for="item in detailList">
                <div style="display: flex;align-items: center;">
                  <div style="width: 47%;">预计收集{{ item.organicType }}（吨）</div>
                  <div class="borders-min" style="width: 48%;">
                    <div style="height: 5rpx;"></div>
                    <input disabled v-model="item.appointWeight" type="text">
                    <div style="height: 5rpx;"></div>
                  </div>
                </div>
                <div style="height: 30rpx;"></div>
                <div style="display: flex;align-items: center;">
                  <div style="width: 47%;">
                    <u-radio-group disabled v-model="item.vehicleType" placement="row">
                      <u-radio label="收运车" :name="0"></u-radio>
                      <u-radio label="自派车" :name="1"></u-radio>
                    </u-radio-group>
                  </div>
                  <div class="borders-min" style="width: 48%;">
                    <div style="height: 5rpx;"></div>
                    <input disabled v-model="item.licenseNumber" type="text">
                    <div style="height: 5rpx;"></div>
                  </div>
                </div>
                <div style="height: 35rpx;"></div>
                <u-line color="#ffffff"></u-line>
                <div style="height: 35rpx;"></div>
              </div>
              <div class="btns" @click="confirm">确认</div>
              <div style="height: 15rpx;"></div>
            </div>
          </view>
        </view>
      </u-overlay>
      <!--  -->
    </div>
  </div>
</template>
<script>
import { farmOrder, farmCancelOrder, orderDetail } from '../../common/example'
export default {
  data() {
    return {
      indent: '',
      list: [],
      show: false,
      currentPage: '',
      detailList: [],
      detailTime: '',
      role: ''
    };
  },
  methods: {
    detail(i) {
      this.detailTime = `${i.appointTime} ${i.appointTimeRange}`
      orderDetail(i.id).then(res => {
        console.log(res.data);
        if (res.data.code == 200 && res.data.data.length > 0) {
          this.detailList = res.data.data;
          this.show = true;
        } else {
          uni.showToast({
            title: '暂无明细',
            icon: 'none'
          })
        }
      })
    },
    cancel(i) {
      uni.showModal({
        title: '提示',
        content: '是否取消当前预约',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if (confirm) {
            farmCancelOrder(i.id).then(res => {
              if (res.data.code == 200) {
                this.falist();
                uni.showToast({
                  title: res.data.msg,
                  icon: 'success',
                  mask: true
                })

              }
            })
          }
        }
      })
    },
    addMake() {
      uni.navigateTo({ url: '/pagesFarmer/index/make' })
    },
    pen() {
      // console.log('open');
    },
    close() {
      this.show = false
      // console.log('close');
    },
    confirm() {
      this.show = false;
    },
    falist() {
      farmOrder({}).then(res => {
        console.log(res.data, '预约记录');
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      })
    }
  },
  onShow() {
    // uni.hideHomeButton();
    this.falist();
    this.indent = uni.getStorageSync('pageIndent');
    this.role = uni.getStorageSync('userInfo').remark;
    var pages = getCurrentPages();
    let currentPageRoute = pages[pages.length - 1].route;
    // 根据当前页面路径设置currentPage
    this.currentPage = currentPageRoute;
    console.log('2222-->', this.currentPage);
  },
  onLoad() {

  }
};
</script>
<style lang="scss">
.flex1 {
  width: 100px;
  height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3ede2;
  font-size: 17px;
}

.flex2 {
  width: 90%;
  margin-left: 5%;
  height: 45px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  font-size: 17px;
  color: #fff;
}

.titles {
  font-size: 24px;
  font-weight: bold;
}

.card {
  width: 90%;
  margin-left: 5%;
  border-radius: 10px;
  background: #fff;

  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.container {
  height: 100vh;
  width: 100vw;
  // background: #e3ede2;
  color: #000000;
  overflow-y: scroll;
}

page {
  background-color: #f3f3f3;
}

.container-in {
  background: #f3f3f3;
  overflow-y: scroll;
  height: 100vh;
  width: 100vw;
}

.look {
  padding: 3px;
  color: #fff;
  background: #46a164;
  border-radius: 5px;
  width: 20%;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #E5EDE3;
}

.looks {
  padding: 3px;
  color: #fff;
  background: #C1E1C9;
  border-radius: 5px;
  border: 0.5px solid #46a164;
  width: 20%;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5F9F6A;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
  font-size: 14px;
}

.btn {
  background: #5F9F6A;
  color: #fff;
  width: 90%;
  margin-left: 5%;
  height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 12vh;
}

.line {
  background: #1A512C;
  width: 7rpx;
  height: 35rpx;
}

.con {
  width: 95%;
  margin-left: 2.5%;
  padding: 10px;
}

.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect {
  width: 90vw;
  background-color: #E5EDE3;
  border-radius: 10px;
  // height: 50vh;
}

.title {
  font-size: 20px;
  font-weight: 500;
}

.borders-min {
  border: 1px solid #1A512C;
  border-radius: 5px;
  text-align: center;
}

.btns {
  background: #5F9F6A;
  color: #fff;
  width: 90%;
  margin-left: 2.5%;
  height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
}

.topStatus {
  width: 20%;
  text-align: center;
  border-radius: 4px;
  background-color: #dffcec;
  color: #000000;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.addBtn{
  width: 120rpx;
  height: 65rpx;
  background-color: #000000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}
</style>